<template>
    <el-main>
        <el-row>
            <el-col :span="24">
                <!-- 轮播图 -->
                <el-col :span="12" class="Carousel">
                    <n-carousel show-arrow autoplay draggable>
                        <img class="carousel-img" src="../assets//img/slide1.jpg">
                        <img class="carousel-img" src="../assets//img/slide2.jpg">
                        <img class="carousel-img" src="../assets//img/slide3.jpg">
                        <img class="carousel-img" src="../assets//img/slide4.jpg">
                        <img class="carousel-img" src="../assets//img/slide5.jpg">
                    </n-carousel>
                </el-col>
                <!-- 公告栏 -->
                <el-col :span="8" class="notice">
                    <h3 align="center">更新日志</h3>
                    <n-scrollbar style="max-height: 400px">
                        <p>2023/2/23，更新了动漫区和漫画区框架，完善了顶部；</p>
                        <p>2023/3/17，适配了16寸左右的屏幕；</p>
                        <p>2023/3/23，完善了首页的头像框和推荐页；</p>
                        <p>2023/3/24，粗略修改了动漫区的滚动条；</p>
                        <p>2023/3/25~2023/4/12，完善了最基础框架和功能；并更新了首页、动漫区、导航、搜索框对各屏幕的适配;优化了所有界面的样式;优化了代码，使得代码体量更小更简洁更明了;更换了部分页面的背景色;
                        </p>
                        <p>2023/4/13~2023/5/10，前端多页面设计已完工！！(PS:页面颜色按钮同步bug还没解决)</p>
                        <p>2023/7/19，换框架了！！！</p>
                    </n-scrollbar>
                </el-col>
            </el-col>
            <!-- 动漫周更表 -->
            <el-divider content-position="left">
                <h2>周期表</h2>
            </el-divider>
            <el-row class="anime_update">
                <el-col :span="24" class="days_button">
                    <el-button v-for="(day, index) in form.days" :key="index" class="week-day">
                        {{ day }}
                    </el-button>
                </el-col>
                <el-col :span="20" class="update">
                    <el-scrollbar>
                        <ul class="scrollbar-flex-content">
                            <li v-for="item in 16" :key="item" class="scrollbar-demo-item">
                                <n-card title="动漫名">
                                    <template #cover>
                                        <img src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg">
                                    </template>
                                    标签类型
                                </n-card>
                            </li>
                        </ul>
                    </el-scrollbar>
                </el-col>
            </el-row>
            <!-- 漫画日推 -->
            <el-divider content-position="left">
                <h2>漫画日推</h2>
            </el-divider>
            <el-col :span="24" class="comic_recommend">
                <el-scrollbar>
                    <ul class="scrollbar-flex-content">
                        <li v-for="item in 16" :key="item" class="scrollbar-demo-item">
                            <n-card title="漫画名">
                                <template #cover>
                                    <img src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg">
                                </template>
                                标签类型
                            </n-card>
                        </li>
                    </ul>
                </el-scrollbar>
            </el-col>
        </el-row>
    </el-main>
    <!-- 底部申明 -->
    <el-footer class="el-footer">
        <el-divider />
        <Footer></Footer>
    </el-footer>
</template>

<script setup>
// 周期表
const form = reactive({
    days: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
})
</script>

<style scoped>
/* 轮播图 */
.carousel-img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    border-radius: 4px;
}

/* 公告栏 */
.notice {
    float: right;
    width: 500px;
    height: 450px;
    padding: 10px 20px;
    background-color: #f1f1f1;
    border-radius: 5px;
}

p {
    margin: 5px 0;
}

/* 动漫周更表 */
.anime_update {
    float: left;
    width: 100%;
    height: 500px;
}

/* 周期按钮 */
.week-day {
    float: left;
    margin: 5px 10px 0 10px;
}

/* 动漫更新 */
.update {
    height: 400px;
    margin: 0 auto;
    background-color: #f1f1f1;
    border-radius: 4px;
}

.update:hover {
    box-shadow: 1px 1px 6px #ddd;
}

/* 漫画推荐 */
.scrollbar-flex-content {
    display: flex;
}

.comic_recommend {
    float: left;
    margin: 20px 0;
    width: 100%;
    height: 390px;
    background-color: #f1f1f1;
    border-radius: 4px;
}

/* 列表 */
.scrollbar-demo-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 250px;
    height: 360px;
    margin: 10px;
    border-radius: 4px;
}
</style>